const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const { prototype } = require('events')
const htmlPlugin = new HtmlPlugin({
    template: path.join(__dirname, '/src/index.html'),
    filename: './index.html'
})

// 注意：左侧的 { } 是解构赋值
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

//复制index.html到内存
module.exports = {
    mode: 'development' ,
    devtool: 'eval-source-map',
    entry: path.join(__dirname, './src/index.js'),
    // devServer: {
    //     static: {
    //         directory: path.join(__dirname, 'src'),
    //     }
    // },
    devServer: {
        open: true,
        host: '127.0.0.1',
        port: 80
    },
    output: {
        path: path.join(__dirname, './dist'),
        //publicPath: '/',
        filename: 'js/bundle.js'
    },

    plugins: [htmlPlugin, new CleanWebpackPlugin()],
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader']},
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            { test: /\.jpg|png|gif$/, use: ['url-loader?limit=22229&outputPath=images'] },
            { test:/\.js$/, use: ['babel-loader'], exclude: /node_modules/ }
        ],
    }
}
